<%--
  Created by IntelliJ IDEA.
  User: syx
  Date: 2021/12/30
  Time: 10:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="bootstrap-4.6.0-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="bootstrap-4.6.0-dist/css/bootstrap.min.css">
    <script src="plupload/js/jquery.js"></script>
    <link rel="stylesheet" href="layui/layui/css/layui.css">
    <script src="pluploadMaster/js/plupload.full.min.js"></script>
    <script src="layui/layui/layui.all.js" charset="UTF-8"></script>
</head>
<body>
    <form id="add">
        外协单号:<input type="text" name="oid" readonly="readonly" value="${param.oid}">
        外协日期:<input type="text" name="otime"><br>
        <input type="hidden" name="id" value="${user.id}">
        雇员号<input type="text" value="${user.uid}" readonly="readonly">
        雇员姓名<input type="text" value="${user.uname}" readonly="readonly">
        雇员部门<input type="text" value="${user.dep}" readonly="readonly">
        雇员岗位<input type="text" value="${user.post}" readonly="readonly">
        备注:<input type="text" name="rem"><br>
        价格:<input type="text" name="price">
        个数:<input type="text" name="num">
        资料:<input type="hidden" name="path"><br>
    </form>
    <button onclick="addUpd()">提交</button>

    <div class="layui-upload">
        <button type="button"  id="testList">添加资料</button>
        <div class="layui-upload-list">
            <table class="layui-table">
                <thead>
                <tr>
                    <th>文件名</th>
                    <th>上传进度</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr></thead>
                <tbody id="demoList"></tbody>
            </table>
        </div>
        <button type="button" id="uploadfiles">开始上传</button>
    </div>
    <table  id="tab" border="1">
        <tr>
            <td>物料编号</td>
            <td>外协单号</td>
            <td>单位名称</td>
            <td>发出时间</td>
            <td>结束时间</td>
            <td>物料名称</td>
            <td>物料价格</td>
            <td>物料数量</td>
            <td>金额</td>
            <td>备注</td>
        </tr>
    </table>

    <!-- Button trigger modal -->
    <button type="button" data-toggle="modal" data-target="#exampleModal">
        添加订单
    </button>

    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">添加订单</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form action="addDetail.do" method="post">
                        物料编号:<input type="text" name="did"><br>
                        外协单号:<input type="text" name="oid" readonly="readonly" value="${param.oid}"><br>
                        单位名称<input type="text" name="oname"><br>
                        发出时间<input type="text" name="betime"><br>
                        结束时间<input type="text" name="fintime"><br>
                        物料名称:<input type="text" name="dname"><br>
                        物料价格:<input type="text" name="price"><br>
                        物料数量:<input type="text" name="num"><br>
                        金额:<input type="text" name="sum"><br>
                        备注:<input type="text" name="rem"><br>
                        <input type="submit" value="添加">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>



</body>
<script>
    $(function () {
        if ($("[name='oid']").val().length==0){
              $.ajax({
                  url:"SnowId.do",
                  type:"post",
                  data:"text",
                  dataType:"json",
                  success:function (obj) {
                      console.log(obj)
                      $("[name='oid']").val(obj)
                  }
              })
        }
          $.ajax({
              url:"detail.do",
              type:"post",
              data:{"oid":$("[name='oid']").val()},
              dataType:"json",
              success:function (obj) {
                  console.log(obj)
                      $("#tab").append('<tr><td>'+obj.did+'</td>' +
                          '<td>'+obj.oid+'</td>' +
                          '<td>'+obj.oname+'</td>' +
                          '<td>'+obj.betime+'</td>' +
                          '<td>'+obj.fintime+'</td>' +
                          '<td>'+obj.dname+'</td>' +
                          '<td>'+obj.price+'</td>' +
                          '<td>'+obj.num+'</td>' +
                          '<td>'+obj.sum+'</td>' +
                          '<td>'+obj.rem+'</td></tr>')
                  $("#add [name='price']").val(obj.price)
                  $("#add [name='num']").val(obj.num)
              }
          })
          $.ajax({
                      url:"hx.do",
                      type:"post",
                      data:{"oid":$("[name=oid]").val()},
                      dataType:"json",
                      success:function (obj) {
                          console.log(obj)
                          $("[name='otime']").val(obj[0].otime)
                          $("[name='rem']").val(obj[0].rem)
                      }
                  })
    })

    function addUpd(){
        var formData = new FormData($("#add")[0]);
          $.ajax({
              url:"addUpd.do",
              type:"post",
              data:formData,
              dataType:"json",
              success:function (obj) {
                  console.log(obj)
                  if (obj>0){
                      alert("添加成功!!")
                      location="list.do"
                  }
              },
              processData:false,
              contentType:false,
          })
    }



//断电续传
    layui.use(['upload','element','layer'], function(){
        var $ = layui.jquery;
        var upload = layui.upload,element = layui.element,layer = layui.layer;
        //实例化一个plupload上传对象
        var uploader = new plupload.Uploader({
            browse_button : 'testList', //触发文件选择对话框的按钮，为那个元素id
            url : 'plupload.do', //服务器端的上传页面地址
            flash_swf_url : 'pluploadMaster/js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
            silverlight_xap_url : 'pluploadMaster/js/Moxie.xap' ,//silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
            max_file_size : '10240mb',
            timeout:0,
            chunk_size : '10mb',
            resize : {
                // width : 200,
                // height : 200,
                // quality : 90,
                // crop : true
            },
            init : {
                PostInit : function() {
                    $("#uploadfiles").click (function() {
                        var isUpload = confirm("是否确定要上传文件?");
                        if(isUpload){
                            uploader.start();// 开始上传
                            return false;
                        }
                    });
                },
                FilesAdded : function(up, files) {
                    plupload.each(files, function(file) {
                        console.log(file,"file");
                        var tr = $(['<tr id="'+ file.id +'" class="uptr">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td>'
                            +'<div  file="'+file.name+'" class="layui-progress layui-progress-big"  lay-showPercent="true"   lay-filter="'+file.id+'">'
                            +'<div  class="layui-progress-bar layui-bg-red" lay-percent="0%"><span class="layui-progress-text">0%</span></div>'
                            /*  +'<input name="pr" value="'+file.name+'" type="hidden" >'*/
                            +'</div>'
                            , '</td>'
                            ,'<td class="upfile">等待上传</td>'
                            ,'<td>'
                            ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-stop">暂停</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-start">继续</button>'
                            ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                            ,'</td>'
                            ,'</tr>'].join(''));
                        $('#demoList').append(tr);
                        //========================================================================================================
                        // 隐藏域存文件路径
                        $("[ name='path']").val("plupload/files/"+file.name);
                        //========================================================================================================

                    });
                    plupload.each(files, function(file) {  //主要针对每个文件的删除操作
                        $("#"+file.id+" .demo-delete").click(function() {
                            console.log(file,"file删除触发")
                            if(file.status==2){
                                alert("文件《"+file.name+"》正在上传，请不要删除！");
                            }else if(file.status==5){
                                alert("文件《"+file.name+"》已经上传成功，不可以删除！");
                            }else{
                                var gnl = confirm("确定要删除《"+file.name+"》?");
                                if (gnl == true) {
                                    $("#"+file.id).remove();
                                    uploader.removeFile(file);
                                } else {
                                    return false;
                                }
                            }
                        });
                        $("#"+file.id+" .demo-stop").click(function() {
                            uploader.stop();// 停止上传
                            console.log(file,"file暂停")
                        });
                        $("#"+file.id+" .demo-start").click(function() {
                            uploader.start();// 继续上传
                            console.log(file,"file开始")
                        });
                    });
                },
                UploadProgress : function(up, file) {//显示文件上传的状态
                    //_mask();
                    var percent = file.percent;
                    element.progress(file.id, percent+"%")
                    //_mask();
                },// 文件上传成功的时候触发，针对于每一个文件；这里主要返回文件上传成功与否的状态，
                FileUploaded : function(up, file, info) {
                    /* var data = eval("(" + info.response + ")");// 解析返回的json数据
                    if (data.code == 3) {
                        alert( "文件《"+file.name+"》上传失败！");
                    } */
                },
                UploadComplete : function(up, files) {//队列中的所有文件上传完后，触发
                    if(files.length<=0){
                        alert("请先添加文件进行，并上传！");
                    }else{
                        var arr2 = new Array();
                        plupload.each(files, function(file) {
                            console.log(file.status);
                            if (file.status == 5) {//将上传成功的文件信息发送到后台进行处理
                                var json = {
                                    docId:file.id,
                                    docName : file.name,
                                    fileSize : plupload.formatSize(file.size)
                                };
                                arr2.push(json);
                            }
                        });
                        console.log(arr2);
                        arr2 = JSON.stringify(arr2);
                        $("#uploadfilelist").val(arr2);//将结果传给前台，以便统一操作
                        //alert( "文件上传完成");
                    }
                },
                Error : function(up, err,file) { // 上传出错的时候触发
                    if(err.code=="-600"){
                        alert("文件："+err.file.name+"太大，超过100mb!");
                    }else{
                        alert( err.file.name+"添加上传队列失败！错误原因："+err.message);
                    }
                }
            }
        });

        //在实例对象上调用init()方法进行初始化
        uploader.init();

        //绑定各种事件，并在事件监听函数中做你想做的事
        uploader.bind('FilesAdded',function(uploader,files){
            //每个事件监听函数都会传入一些很有用的参数，
            //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        });
        uploader.bind('UploadProgress',function(uploader,file){
            //每个事件监听函数都会传入一些很有用的参数，
            //我们可以利用这些参数提供的信息来做比如更新UI，提示上传进度等操作
        });
        //......
        //......

        //最后给"开始上传"按钮注册事件
        // document.getElementById('uploadfiles').onclick = function(){
        //
        // }
    });

</script>
</html>
